<template>
  <div>
    <Header></Header>
    <!-- 大背景图 -->
    <div class="preview">
      <!-- 星星特效 -->
      <div class="stars" ref="starsRef">
        <div class="star" v-for="(item, index) in starsCount" :key="'star_' + index"></div>
      </div>

      <!-- 向下箭头区域 -->
      <div class="preview-scroll">
        <a href="#container">
          <el-image :src="downIcon" style="width: 50px; height: 50px"/>
        </a>
      </div>
    </div>

    <main-container>
      <div class="container" id="container">
        <article-list :article-type="0"></article-list>
      </div>
    </main-container>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import avatar from  '@/assets/images/avatar/avatar.gif';
import downIcon from  '@/assets/images/icon/down.png';

import ArticleList from "@/components/ArticleList/ArticleList";

export default {
  name: 'HomeView',
  components: {ArticleList},
  setup() {
    let cardList = [1,2,3,4,5];

    let starsRef = ref(null);

    //星星数量
    const starsCount = 800;
    //间距
    const distance = 900;

    onMounted(() => {

      // 星星特效
      let starNodes = Array.from(starsRef.value.children);
      starNodes.forEach((item) => {
        let speed = 0.2 + Math.random();
        let thisDistance = distance + Math.random() * 300;
        item.style.transformOrigin = `0 0 ${thisDistance}px`;
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`;
      });
    });



    return {
      starsRef,
      starsCount,
      cardList,
      avatar,
      downIcon,
    };
  },
}
</script>

<style scoped>
@import "../assets/css/index.css";

:deep(.el-card){
  padding:0;
}
</style>
